<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单</title>
</head>
<body>
  <div id="demo">
    <h1>表单</h1>
    <form action="/xx" @submit.prevent="handleSubmit">
      用户名 <input type="text" v-model="username"><br>
      性别
      <label>
        <input type="radio" v-model="sex" value="女">
        女
      <label>
        <input type="radio" v-model="sex" value="男">
        男
      </label><br>
      爱好<label v-for="(like,index) in likes" key="index" >
        <input type="checkbox"  
        name="like" value="like" 
        :checked="like.checked" v-model="like.checked"/>
        {{like.name}}
      </label>
      <br>
      城市 <select name="city" v-model="cityId">
        <option value="">未选择</option>
        <option :value="city.id" v-for="(city, index) in allCitys" 
        key="city.id">{{city.name}}</option>
      </select><br>
      <textarea name="info" v-model="info"></textarea><br>
      <input type="submit" value="注册">
    </form>

    <div>
      <h1>信息</h1>
      {{username}}
      {{sex}}
      {{city}}
      {{like}}
      {{info}}
    </div>
    
  </div>
  <script src="../vue.js"></script>
  <script>
    new Vue({
      el: "#demo",
      data: {
        username: 'sanday',
        sex: '女',
        city: '深圳',
        likes: [
          {
            name: '篮球',
            checked: false
          },
          {
            name: '气球',
            checked: true
          },
          {
            name: '足球',
            checked: false
          }
        ],
        allCitys: [
          {
            id: 1,
            name: '北京'
          },
          {
            id: 2,
            name: '深圳'
          },
          {
            id: 3,
            name: '上海'
          }
        ],
        info: 'hello world',
        cityId: 2
      },
      computed: {
        like() {
          return this.likes.filter(e => e.checked).map(e => e.name)
        }
      },
      methods: {
        handleSubmit() {
          this.allCitys.forEach(e => {
            if(e.id == this.cityId) {
              this.city = e.name
            }
          });
          console.log(
            this.username,
            this.sex,
            this.city,
            this.like,
            this.info
          )
        }
      },
    })

  </script>
</body>
</html>